<template>
	<div class="">
		<base-loading-box class="w-full mt-[14px] min-h-[100px]" :isEmpty="isEmpty" :loading="loading">
			<n-grid ref="el" y-gap="24" x-gap="12" :cols="colsTags">
				<n-gi v-for="(item, index) in list" :key="index" class="app-hover-offset">
					<item-card :selectType="selectId" :type="type" :item="item" />
				</n-gi>
			</n-grid>
		</base-loading-box>
		<base-more
			v-if="isShowMore"
			v-show="!isEmpty"
			class="pt-6 flex-col items-center"
			:isFinish="list.length >= data.totalItems"
			:text="moreText"
			@load="getList(true)"></base-more>
	</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, PropType, onMounted } from 'vue'
import { NGi, NGrid } from 'naive-ui'
import { t } from '@/utils'
import { BaseMore, BaseLoadingBox } from '@/components/base'
import { useListCols, useRequest } from '@/hooks'
import { SlotFilterType } from './type'
import ItemCard from '../common/item-card.vue'
import { useAppStore } from '@/store'
import {
	getAllFavoriteGameLists,
	getRecentPlayedGameLists,
	getCasinoGameBySlug,
	getProviderBySlug
} from '@/api/other.ts'
//import EmptyItem from '../big-winner/empty-item.vue'
const { run: getFavoriteGames, data: favoriteGameLists } = useRequest<any>(getAllFavoriteGameLists)
const { run: getProvidersBySlug, data: providersBySlug } = useRequest<any>(getProviderBySlug)
const { run: getRecentPlayedGames, data: recentPlayedGameLists } =
	useRequest<any>(getRecentPlayedGameLists)
const { run: getDataById, data: dataById } = useRequest<any>(getCasinoGameBySlug, {
	resultAlias: { list: 'items' }
})
const props = defineProps({
	selectId: {
		type: String as PropType<SlotFilterType>,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	type: {
		type: String,
		default: 'slots'
	},
	providerId: {
		type: String,
		default: ''
	},
	multiple: {
		type: Boolean,
		default: false
	},
	tagData: {
		type: Object,
		default: () => ({
			id: '',
			gameTagGroupId: ''
		})
	},
	checkedValues: {
		type: Array as () => string[],
		default: () => []
	},
	sortingValues: {
		type: String,
		default: '1'
	}
})
const el = ref(null)
const loading = ref(false)
const isEmpty = ref(true)
const list: any = ref([])
const total = ref(0)
const data: any = ref({})
const currentPage = ref(1)
const currentPageSize = ref(40)

const { colsTags } = useListCols(el)
const appStore = useAppStore()

const emit = defineEmits(['update-gameList-values'])
const moreText = computed(() => t('match.slotsMore', [list.value.length, data.value.totalItems]))

const isShowMore = computed(() => {
	if (props.type === 'recent') {
		return false
	} else {
		return true
	}
})
watch(
	() => [appStore.region, props.sortingValues, props.checkedValues, props.tagData],
	() => {
		getList(false)
	}
)

const getList = async (isLoadMore = false) => {
	loading.value = true
	isEmpty.value = true
	if (isLoadMore) {
		currentPage.value = currentPage.value + 1
	} else {
		currentPage.value = 1
		list.value = []
	}
	if (props.type === 'favourite') {
		await getFavoriteGames({
			page: currentPage.value,
			pageSize: currentPageSize.value
		})
		loading.value = false
		data.value = favoriteGameLists.value
		list.value = favoriteGameLists.value.items
		data.value.labelNameT = 'casinoAll.favorite'
		emit('update-gameList-values', data.value)

		if (list.value.length > 0) {
			isEmpty.value = false
		} else {
			isEmpty.value = true
		}
	} else if (props.type === 'recent') {
		await getRecentPlayedGames({
			page: currentPage.value,
			pageSize: currentPageSize.value
		})
		data.value = recentPlayedGameLists.value
		list.value = recentPlayedGameLists.value.items
		data.value.labelNameT = 'recents.title'
		emit('update-gameList-values', data.value)

		if (list.value.length > 0) {
			isEmpty.value = false
		} else {
			isEmpty.value = true
		}
	} else if (props.type === 'providerBySlug') {
		await getProvidersBySlug({
			page: currentPage.value,
			pageSize: currentPageSize.value,
			developerSlug: props.tagData.id,
			sort: props.sortingValues,
			gameTagSlugs: props.checkedValues
		})
		loading.value = false
		data.value = providersBySlug.value

		if (isLoadMore) {
			list.value = list.value.concat(data.value.items)
		} else {
			list.value = data.value.items
		}

		if (list.value.length > 0) {
			isEmpty.value = false
		} else {
			isEmpty.value = true
		}
		data.value.labelName = data.value.title || props.tagData.id
		emit('update-gameList-values', data.value)
	} else {
		await getDataById({
			page: currentPage.value,
			pageSize: currentPageSize.value,
			tagSlug: props.tagData.id,
			sort: props.sortingValues,
			developerIds: props.checkedValues
		})
		loading.value = false

		if (dataById.value.length > 0) {
			data.value = dataById.value[0]
			if (isLoadMore) {
				list.value = list.value.concat(data.value.games)
			} else {
				list.value = data.value.games
			}
			total.value = dataById.value[0].totalPages
			isEmpty.value = false
			emit('update-gameList-values', data.value)
		} else {
			isEmpty.value = true
		}
	}
}

onMounted(() => {
	getList()
})

defineExpose({
	getList
})
</script>
